<template>
  <view class="address_list">
    <view class="add_item" v-for="item in addressList" :key="item.addrId">
      <view class="map_title" v-if="addressList.length">
        <!-- <text class="ones" v-if="item.isDefault === '0'">默认</text> -->
        <text class="title_name"
          >{{ item.provinceName }}
          {{ item.cityName ? `-${item.cityName} ` : "" }}
          {{ item.districtName ? `-${item.districtName} ` : "" }}</text
        >
        <!-- <text>{{ item.userMobile }}</text> -->
      </view>
      <view class="map_cotent" v-if="addressList.length">
        {{ item.addrDetail }}
      </view>
    </view>
    <view v-if="loading" style="margin-top: 20rpx">
      <i-skeleton
        size="48rpx"
        :icon="false"
        :rowsW="['60%', '90%']"
        :rowsH="['32rpx', '24rpx']"
        height="140rpx"
        :rows="2"
      >
      </i-skeleton>
    </view>
    <i-notData
      height="400rpx"
      v-if="!loading && !addressList.length"
    ></i-notData>
    <!-- -->
    <i-floatBut @click="toAdd" v-if="!loading && !addressList.length">
      <view class="float">
        <image
          src="../../static/images/address_icon.png"
          mode="widthFix"
        ></image>
      </view>
    </i-floatBut>
  </view>
</template>

<script lang="ts" setup>
import { getApiListAddress } from "../../api/index";
import { ref } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import useStore from "../../stores/index";

const store = useStore();
const type = ref("");
const skeleton = ref(true);
const loading = ref(false);

const addressList = ref<Array<any>>([]);

const toAdd = () => {
  uni.navigateTo({
  	url:'/pages/views/add_address'
  })
};

const getAddressList = async () => {
  loading.value = true;
  await store.setUserInfo();
  if (store.userInfo.provinceId) {
    addressList.value = [
      {
        userName: store.userInfo.nickName,
        userMobile: store.userInfo.mobile,
        provinceName: store.userInfo.provinceName,
        cityName: store.userInfo.cityName,
        countyName: store.userInfo.countyName,
        addrDetail: store.userInfo.address,
        districtName: store.userInfo.districtName,
      },
    ];
  }

  loading.value = false;
};
onShow(() => {
  addressList.value = [];
  getAddressList();
});
</script>

<style lang="scss" scoped>
.address_list {
  width: 100%;
  height: 100%;
}
.add_item {
  @include flexC;
  padding: 40rpx 32rpx;
  border-bottom: 1rpx solid $backColor;
  margin: 0 auto;
  background-color: #fff;

  .map_title {
    width: 100%;
    @include flexR;
    @include titlefont(30rpx);
    margin-bottom: 12rpx;

    .ones {
      border-radius: 8rpx;
      margin-right: 24rpx;
      border: 1rpx solid #ff9e9e;
      @include dfont(22rpx);
      padding: 2rpx 8rpx;
      color: #ff3d3d;
      white-space: nowrap;
    }

    .title_name {
      margin-right: 24rpx;
      @include overflow;
      max-width: 90%;
      margin-bottom: 8rpx;
    }
  }

  .map_cotent {
    @include dfont(26rpx);
    white-space: normal;
    color: #a0a0ad;
  }
}

.float {
  image {
    width: 104rpx;
    height: 104rpx;
  }
}
</style>
